<template>
  <scroll-view enable-flex scroll-y @scrolltolower="handleScrollLower" class="video_wrap">
    <view class="video_item" v-for="(item, i) in verticle" :key="item.id">
      <go-detail :list="verticle" :monthIndex="i">
        <image mode="widthFix" :src="item.thumb"></image>
      </go-detail>
    </view>
  </scroll-view>
</template>

<script>
import goDetail from "../../../components/goTetail.vue";

export default {
  data() {
    return {
      params: {
        limit: 20,
        adult: false,
        skip: 0,
        first: 0,
        order: "hot",
      },
      verticle: [],
      hasMore: true,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v1/vertical/vertical",
        data: this.params,
      }).then((res) => {
        if (res.data.res.vertical.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多了",
            icon: "none",
          });
          return;
        }
        this.verticle = [...this.verticle, ...res.data.res.vertical];
      });
    },
    handleScrollLower() {
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "没有更多了",
          icon: "none",
        });
      }
    },
  },
  components: {
    goDetail,
  },
};
</script>

<style lang="scss" scoped>
.video_wrap {
  padding: 0 5rpx;
  display: flex;
  flex-wrap: wrap;
  .video_item {
    width: 50%;
    padding: 5rpx;
  }
}
</style>
